<template>
        <wl-panel  title="添加审核人" subTitle="" titleIcon="pop_xz">
            <template v-if="footerFlag" slot="panel_footer">
                <el-button @click="editRole" type="primary">保存</el-button>
            </template>
            <template slot="panel_body">
                <p class="title">请添加审核人</p>
                <div class="container">
                  <div @click="selectType('acc')" :class="[{select:accSelect},'div-nr']">
                      <p class="title-nr">个人账号</p>
                      <img class="img-nr" src="~src/assets/img/E_accounts.png" alt="acc">
                      <img :class="[{'img-select':accSelect,'img-noselect':!accSelect}]" src="~src/assets/img/E_Adopt.png" alt="lead ">
                      <el-form :model="accData" status-icon  label-width="100px" class="demo-ruleForm select-nr">
                            <wl-arr-select  reqUrl="/account/list.do" :isMore="false"  @viewChange="accChange" setW=130  type="name" :rawData="accData"></wl-arr-select>
                      </el-form>
                  </div> 
                  <div @click="selectType('lead')" :class="[{select:leadSelect},'div-nr']">
                      <p class="title-nr">上级领导</p>
                      <img class="img-nr" src="~src/assets/img/E_leader.png" alt="lead ">
                      <img :class="[{'img-select':leadSelect,'img-noselect':!leadSelect}]" src="~src/assets/img/E_Adopt.png" alt="lead ">
                  </div> 
                  <div @click="selectType('member')" :class="[{select:memSelect},'div-nr']">
                      <p class="title-nr">角色</p>
                      <img class="img-nr" src="~src/assets/img/E_CharacterName.png" alt="member">
                      <img :class="[{'img-select':memSelect,'img-noselect':!memSelect}]" src="~src/assets/img/E_Adopt.png" alt="lead ">
                      <el-form  :model="memberData" status-icon  label-width="100px" class="demo-ruleForm select-nr">
                          <wl-arr-select  reqUrl="/role/list.do" :isMore="false" @viewChange="roleChange" setW=130  type="name" :rawData="memberData"></wl-arr-select>
                      </el-form>
                  </div>
                </div> 
            </template>
        </wl-panel>
</template>
<script lang="ts" src="./auditT_role.ts">
</script>


<style scoped>
p {
  margin: 0;
}

.title {
  margin-left: 10px;
  margin-bottom: 5px;
}

.container {
  display: flex;
  margin-right: 10px;
}

.div-nr {
  width: 150px;
  height: 200px;
  border: 1px solid rgba(201, 201, 201, 1);
  margin-left: 10px;
  position: relative;
}

.img-nr {
  display: block;
  margin: 20px auto;
}

.title-nr {
  margin: 0;
  text-align: center;
  padding-top: 3px;
  background-color: #ccebf8;
  color: #317eae;
  font-weight: bold;
}

.select-nr {
  text-align: center;
}

.img-select {
  display: block;
  position: absolute;
  top: 50%;
  right: 20%;
}

.img-noselect {
  display: none;
}

.select {
  border: 2px solid rgba(114, 186, 234, 1);
}
</style>

